<template>
    <div>
        <div class="boss">
            <ul class="zzzz">
                <li>
                    <img src="../../img/奥迪.jpg" alt="">
                    <div class="biaosi">奥迪</div>
                </li>
                <li>
                    <img src="../../img/奔驰.jpg" alt="">
                    <div class="biaosi">奔驰</div>
                </li>
                <li>
                    <img src="../../img/宝马.jpg" alt="">
                    <div class="biaosi">宝马</div>
                </li>
                <li>
                    <img src="../../img/凯迪拉克.jpg" alt="">
                    <div class="biaosi">凯迪拉克</div>
                </li>
                <li>
                    <img src="../../img/雷克萨斯.jpg" alt="">
                    <div class="biaosi">雷克萨斯</div>
                </li>
            </ul>

            <ul class="zzzz">
                <li>
                    <img src="../../img/沃尔沃.jpg" alt="">
                    <div class="biaosi">沃尔沃</div>
                </li>
                <li>
                    <img src="../../img/红旗.jpg" alt="">
                    <div class="biaosi">红旗</div>
                </li>
                <li>
                    <img src="../../img/路虎.jpg" alt="">
                    <div class="biaosi">路虎</div>
                </li>
                <li>
                    <img src="../../img/保时捷.jpg" alt="">
                    <div class="biaosi">保时捷</div>
                </li>
                <li>
                    <img src="../../img/捷豹.jpg" alt="">
                    <div class="biaosi">捷豹</div>
                </li>
            </ul>
            <ul class="carss">
                <li>
                    <img src="../../img/奥迪A6L.jpg" alt="">
                    <div>奥迪A6L</div>
                </li>

                <li>
                    <img src="../../img/奔驰C级2.jpg" alt="">
                    <div>奔驰C级</div>
                </li>

                <li>
                    <img src="../../img/奔驰E级.jpg" alt="">
                    <div>奔驰E级</div>
                </li>

                <li>
                    <img src="../../img/雷克萨斯.jpg" alt="">
                    <div>雷克萨斯</div>
                </li>
            </ul>
        </div>


        <div class="word">
            <p><strong>销量排行</strong>&nbsp;&nbsp;&nbsp;&nbsp;降价排行</p>

            <div class="xxx">
                <div class="everys">
                    <img src="../../img/6.jpg" alt="">
                    <div class="models">MOdel Y<br><small>25.99-35.99万</small><br>29387辆</div>
                </div>
                <div class="aa"><button>询底价</button></div>
            </div>

            <div class="xxx">
                <div class="everys">
                    <img src="../../img/6.jpg" alt="">
                    <div class="models">奔驰C级<br><small>32.52-37.73万</small><br>16239辆</div>
                </div>
                <div class="aa"><button>询底价</button></div>
            </div>

            <div class="xxx">
                <div class="everys">
                    <img src="../../img/6.jpg" alt="">
                    <div class="models">红旗HS5<br><small>18.38-24.98万</small><br>14141辆</div>
                </div>
                <div class="aa"><button>询底价</button></div>
            </div>

            <div class="cc">查看更多</div>
        </div>

    </div>
</template>

<script>
export default {

}
</script>

<style lang="scss" scoped>

div {
    .boss {
        height: 100%;

        .zzzz {
            margin-top: 15px;
            display: flex;
            text-align: center;
            justify-content: space-around;

            li {
                height: 100%;

                img {
                    width: 80px;
                    height: 80px;
                }
            }
        }

        .carss {
            margin-top: 20px;
            display: flex;
            text-align: center;
            justify-content: space-around;

            li {
                img {

                    width: 120px;
                    height: 120px;

                }
            }
        }
    }

    .word {
        margin-top: 25px;
        background-color: white;
        width: 95%;
        margin: 0 auto;
        .cc {

            border-top: 1px solid wheat;
            height: 100px;
            margin-top: 30px;
            text-align: center;
        }
    }

    .xxx {
        height: 100px;
        display: flex;
        justify-content: space-between;
        text-align: center;
        align-items: center;
        margin-top: 30px;

        .everys {
            display: flex;
            margin-left: 50px;

            img {
                width: 100px;
                height: 100px;
            }
            small{
                color: red;
                padding-left: 55px;
            }
        }

        .aa {
            margin-right: 50px;

            button {
                color: aliceblue;
                background-color: blue;
                width: 150px;
                height: 50px;
                border: 0;
                border-radius: 10px;
            }
        }

    }

}
</style>